<template>
    <div class="login-page">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="login-title">🔐大屏可视化</span>
        </div>
        <div class="login-form">
          <el-form :model="form" :rules="loginRules" ref="loginForm" >
            <el-form-item prop="userName">
              <el-input type="text" v-model="form.userName" auto-complete="off" placeholder="请输入用户名">
                <template slot="prepend"><i style="font-size:20px" class="el-icon-user"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item prop="passWord">
              <el-input type="password" v-model="form.passWord" auto-complete="off" placeholder="请输入密码">
                <template slot="prepend"><i style="font-size:20px" class="el-icon-key"></i></template>
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button style="width:100%;" type="primary" @click="handleLogin" :loading="loading">登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
    </div>
  </template>
  
  <script>
  import {dashboardLogin} from '../api/Login';


  export default {
    //eslint-disable-next-line vue/multi-word-component-names
    name: 'Login',
    data(){
      return {
        loading: false,
        form:{
          userName: '',
          passWord: ''
        },
        response:{
            token:'',
            msg: '',
            code: 0
        },
        loginRules:{
          userName: [
            { required: true, message: '请输入账户', trigger: 'blur' },
          ],
          passWord: [
            { required: true, message: '请输入密码', trigger: 'blur'}
          ]
        },
       
        
      }
    },
    methods:{
   
       
      handleLogin(){
        this.$refs.loginForm.validate().then(()=>{
          this.loading = true;
          dashboardLogin(this.form.userName, this.form.passWord).then((res)=>{
                console.log(res);
                this.response = res;
                if(this.response.code == 200){
                    this.$store.commit("setToken", this.response.token);
                    this.$store.commit("setUserInfo", this.form.userName);
                    this.$router.push({ path: "/city" }).catch(()=>{});
                }else if(this.response.code == 202){
                    this.response = res;
                    this.loading = false;
                    this.$message({
                        message: this.response.msg,
                        type: 'warning'
                    });
                }else{
                    this.loading = false;
                    this.$message({
                        message: '用户名或密码错误！',
                        type: 'warning'
                    });

                }

            })
            
  
          //模拟异步请求后台接口 登录操作
        //   setTimeout(()=>{
        //      // this.$router.push('/home');
        //     dashboardLogin(this.form).then((res)=>{
        //         console.log(res);
        //         this.loading = false;
        //         if(res == "login"){
        //             this.$router.push({ path: "/" }).catch(()=>{});
        //         }
        //     })
            
        //   }, 1000)
        }).catch((()=>{
            
          this.$message({
            message: '输入错误！',
            type: 'warning'
          });
        }))
      }
    }
  }
  </script>
  
  <style scoped>
  .login-page{
    /* background-image: linear-gradient(180deg, #2af598 0%, #009efd 100%); */
    background:url('../assets/img/pageBg.png') no-repeat fixed center;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  
  .login-title{
    font-size: 20px;
  }
  
  .box-card {
    width: 375px;
    background-color: rgba(255, 255, 255, 0.5);
  }
  
  </style>
  
  